<script setup>
import { onMounted, ref, defineEmits, getCurrentInstance, watch  } from 'vue'
import { formatTime } from '../../utils/time'
import request from '../../api/index'
const proxy = getCurrentInstance()?.proxy
const props = defineProps(['labelList'])
const emits = defineEmits(['selectLabel', 'lUpdateDate'])
const inputValue = ref('')
const selectLabelList = ref([])
const visible = ref(false)
const url = ref({
  add: '/admin/label/addLabel',
  update: '/admin/label/updateLabel',
  delete: '/admin/label//deleteLabel'
})
const selectLabel = (index, id) => {
  let ids =[]
  if (selectLabelList.value.indexOf(index) === -1) {
    selectLabelList.value.push(index)
  } else {
    selectLabelList.value.splice(selectLabelList.value.indexOf(index), 1)
    ids.splice(selectLabelList.value.indexOf(index), 1)
  }
  selectLabelList.value.forEach(item => {
    ids.push(props.labelList[item].ID)
  })
  emits('selectLabel', ids)
}

const updateLabelName = (id, name) => {
  request.put(url.value.update + '/' + id, {
    labelName: name,
  }).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      lUpdateDate()
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        lUpdateDate()
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}

const addlabel = () => {
  if (inputValue.value.length === 0) {
    proxy.$message({ type: 'error', duration: 1000,  message: '标签名不能为空' })
    return
  }
  request.post(url.value.add, {
    labelName: inputValue.value,
  }).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      lUpdateDate()
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}

const lUpdateDate = id => {
  emits('lUpdateDate', id)
}

const deleteLabel = id => {
  request.delete(url.value.delete + '/' + id).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      selectLabelList.value.splice(selectLabelList.value.indexOf(id), 1)
      lUpdateDate(id)
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}

watch(inputValue, (count, prevCount) => {
  if (count.length > 10) {
    inputValue.value = prevCount
  }
})
</script>

<template>
  <div class="label">
    <yk-space dir="vertical" :size="16" style="width:100%">
      <yk-space class="label-action" style="width:100%" justify="between">
        <div class="label-title">标签</div>
        <yk-space :size="16">
          <yk-popconfirm
          trigger="click"
          title="请输入标签名称"
          @confirm="addlabel"
          placement="bottomRight"
        >
          <template #content>
            <div class="addLabel">
              <input type="text" class="label-input" placeholder="请输入..." v-model="inputValue" />
              <span class="label-textNum">{{ inputValue.length }} / 10</span>
            </div>
          </template>
          <a @click="inputValue = ''"><IconPlusCircleOutline/>新建</a>
          </yk-popconfirm>
          <yk-modal v-model="visible" title="管理标签" :show-footer="false">
            <yk-scrollbar style="height:500px" v-if="props.labelList.length > 0">
              <yk-table>
                <yk-table-column property="label_name" label="标签名"></yk-table-column>
                <yk-table-column property="num" label="关联数"></yk-table-column>
                <yk-table-column property="create_time" label="创建时间"></yk-table-column>
                <yk-table-column
                  property="manage"
                  label="操作"
                  align="right"
                ></yk-table-column>
                <template #tbody>
                  <tr v-for="(item, index) in props.labelList" :key="item.ID" class="yk-table__row">
                    <td class="yk-table__cell">
                      <input type="text" class="label-input" placeholder="请输入..." v-model="item.name" @blur="updateLabelName(item.ID, item.name)" @input="item.name = item.name.slice(0, 10)"/>
                      <span class="label-textNum-table">{{ item.name.length }} / 10</span>
                    </td>
                    <td class="yk-table__cell">
                      {{ item.articleCount }}
                    </td>
                    <td class="yk-table__cell">
                      {{ formatTime(item.create_time) }}
                    </td>
                    <td class="yk-table__cell text-right">
                      <yk-text type="primary" style="cursor: pointer" @click="deleteLabel(item.ID)">删除</yk-text>
                    </td>
                  </tr>
                </template>
              </yk-table>
              </yk-scrollbar>
              <yk-empty v-else style="width:100%;">
                <template #description>
                  还没有标签
                </template>
              </yk-empty>
          </yk-modal>
          <a @click="visible = true"><IconSettingsOutline/>管理标签</a>
        </yk-space>
        
      </yk-space>
      <yk-space wrap style="width:100%" :size="8">
        <div class="label-item" v-for="(item, index) in props.labelList" :key="item.ID" @click="selectLabel(index, item.ID)" :class="{'label-active': selectLabelList.includes(index)}">{{ item.name }}</div>
      </yk-space>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
.label {
  padding: 24px 24px 16px;
  width: 100%;
  height: 100%;
  background-color: @bg-color-l;
  border-radius: 8px;

  .label-action {
    width: 150px;

    .label-title {
      font-size: 18px;
      font-weight: 600;
    }

    a {
      color: @pcolor;
      height: 30px;
      line-height: 30px;

      &:hover {
        cursor: pointer;
      }
    }

    .addLabel {
      color: @gray-6;

      .label-textNum {
        position: absolute;
        top: 22px;
        right: 15px;
      }
    }
  }

  .label-item {
    padding: 4px 8px;
    border-radius: 8px;
    background-color: @gray-1;
  }
  
  .label-active {
    color: @pcolor;
    background-color: @pcolor-1;
  }
}

.label-input {
  width:100%;
  margin: 16px 0;
  height: 35px;
  border: 1px solid @bg-color-s;
  background-color: @bg-color-s;
  border-radius: 8px;
  padding: 5px;

  &:hover {
    outline: 1px solid @pcolor;
  }

  &:focus {
    outline: 1px solid @pcolor;
  }
} 

.label-textNum-table {
  position: absolute;
  top: 22px;
  right: 40px;
}
</style>